<template>
  <router-view></router-view>
  <van-tabbar v-model="active" :placeholder="true" :fixed="true">
    <van-tabbar-item badge="" to="/home">
      <span>主页</span>
      <template #icon="props">
        <img :src="props.active ? icon[0].active : icon[0].inactive" />
      </template>
    </van-tabbar-item>
    <!-- <van-tabbar-item badge="">
      <span>拍照识鸟</span>
      <template #icon="props">
        <img :src="props.active ? icon[1].active : icon[1].inactive" />
      </template>
    </van-tabbar-item> -->
    <van-tabbar-item to="/note/add" icon="edit">新游记</van-tabbar-item>

    <van-tabbar-item to="/my" badge="">
      <span>我的</span>
      <template #icon="props">
        <img :src="props.active ? icon[2].active : icon[2].inactive" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { onBeforeMount, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    const router = useRouter();
    const state = reactive({
      active: 0,
    });

    const icon = [
      {
        active: require("../assets/img/bird-active.png"),
        inactive: require("../assets/img/bird.png"),
      },
      {
        active: require("../assets/img/camera-active.png"),
        inactive: require("../assets/img/camera.png"),
      },
      {
        active: require("../assets/img/My-active.png"),
        inactive: require("../assets/img/My.png"),
      },
    ];
    onBeforeMount(() => {
      switch (router.currentRoute._rawValue.path) {
        case "/home":
          state.active = 0;
          break;
        case "/my":
          state.active = 3;
          break;
        default:
          break;
      }
      // console.log(router.currentRoute._rawValue.path);
    });
    return {
      icon,
      ...toRefs(state),
    };
  },
};
</script>

<style></style>
